
<style>
* {padding:0px;margin:0px;}
html,body {
    height: 100%;
    background-color: #000;
}
.xueT {
    width: 200px;
    height: 20px;
    border: solid #fff 1px;
}
.xueT span {
  
    height: 20px;
    display: inline-block;
    background-color: red;
}
</style>

<body>
    <div class="xueT"><span style="width: 200px;"></span></div>
</body>

<script>

var x = setInterval(function() {
    var spanObj = document.querySelector('.xueT span')
  
    var width = parseInt(spanObj.style.width)
   
    width-=10
    spanObj.style.width = width + 'px'
    if(width==0){
    clearInterval(x)
    alert('游戏结束重新开始')
    location.href=location.href
}

   
}, 1000)


    var bodyobj = document.body
bodyobj.onclick = function(evt){
    var e = evt || window.event
    var target = e.target || e.srcElement
    if(target.nodeName === 'IMG'){
        bodyobj.removeChild(target)
        var spanObj = document.querySelector('.xueT span')
  
  var width = parseInt(spanObj.style.width)
 
  width++
  spanObj.style.width = width + 'px'
    }
}
setInterval(function(){
    var imgobj = document.createElement('img')
    imgobj.src = './star.gif'
    var min1 = 20 
    var max1 = 100
    imgobj.width = Math.floor(Math.random()*(max1-min1+1)+min1)
    imgobj.style.position = 'absolute'

    var min2 = 0
    var max2 = (window.innerWidth || document.documentElement.clientWidth)-imgobj.width
    imgobj.style.left = Math.floor(Math.random()*(max2-min2+1)+min2)+'px'
    var max3 = (window.innerHeight || document.documentElement.clientHeight-imgobj.width)
    imgobj.style.top = Math.floor( Math.random()*(max3-min2+1)+min2)+'px'
    document.body.appendChild(imgobj)
},1000)


var xuet = document.querySelector('span')
var width1 = parseInt(xuet.style.width)

</script>